<template>
  <div class="results">
    <div class="title">
      <ul class="sorting">
        <li
          v-for="(item, index) in sorting"
          :key="index"
          @click="jump(index)"
          :class="{ active: currentIndex == index }"
        >
          {{ item }}
        </li>
      </ul>
      <ul class="label">
        <li v-for="(item, index) in label" :key="index">{{ item }}</li>
      </ul>
    </div>
    <div class="list">
      <div class="shoplist" v-for="(item,index) in shoplist" :key="index" @click="$router.push('/detail/'+item.mtWmPoiId)">
    <div class="imgBox">
        <img v-lazy="item.picUrl" alt="">
    </div>
    <div class="text">
        <h2>{{item.name}}</h2>
        <div class="score">
            <van-icon name="star" />
            <span>{{item.wmPoiScore/10}}</span> 
            <span>{{item.monthSalesTip}}</span>
        </div>
        <div class="send">
            <span>
                {{item.minPriceTip}} {{item.shippingFeeTip}}
            </span>
            <span>
                {{item.deliveryTimeTip}} {{item.distance}}
            </span>
        </div>
        <div class="evaluation">
            <span>
                {{item.averagePriceTip}}
            </span>
        </div>
        <div class="coupons">
            <span v-for="(v,i) in item.discounts2" :key="i">{{v.info}}</span>
        </div>
    </div>
   </div>

    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant';
import { shop_search } from "@/utils/api"
export default {
  data() {
    return {
      currentIndex: 0,
      sorting: ["综合排序", "评分最高", "销量最高", "筛选"],
      label: ["年货节热卖", "津贴联盟"],
      shoplist: [],
      boole: true,
    };
  },
   methods: {
      jump(index){
        this.currentIndex = index;
        if(index == 1){
            if( this.bool ) {
                this.shoplist.sort((a,b)=>{
                    return a.wmPoiScore - b.wmPoiScore
                })
                this.bool = false
            } else{
                this.shoplist.sort((a,b)=>{
                    return b.wmPoiScore - a.wmPoiScore
                })
                this.bool = true
            }
        }
      }  
    },
    methods:{
      fun(){
        var font = this.$route.query.key
      console.log(font);
      if(!font) return
      shop_search({searchkey:font}).then((res)=>{
        console.log(res);
        if(res.data.list.length != 0){
          this.shoplist = res.data.list
        }else{
          Dialog.alert({
            message: '没有您搜索的商品或店铺',
          }).then(() => {
            this.$router.push('/searchview/index')
          });
        }
      })
      }
    },
    mounted(){
      this.fun()
    },
    watch:{
      $route(){
        this.fun()
      }
    }
};
</script>

<style scoped lang="scss">
.results {
  margin: 0 .4rem;
  .sorting {
    display: flex;
    justify-content: space-between;
    li {
      font-size: 0.48rem;
      margin: 0.2667rem 0;
    }
  }
  .label {
    display: flex;
    li {
      font-size: 0.3733rem;
      background-color: #eee;
      padding: 0.2133rem 0.2667rem;
      border-radius: 0.1333rem;
      margin: 0.2667rem .2667rem .2667rem 0 ;
    }
  }
  .list{
    .shoplist{
        display: flex;
        margin: .2667rem 0 .5333rem 0;
        .imgBox{
            width: 2.1333rem;
            height:  2.1333rem;
            margin-right: .2667rem;
            margin-top: .1333rem;
            font-size: 0;
            img{
                border: 1px solid #ccc;
                width: 100%;
                height: 100%;
                border-radius: .1333rem;
            }
        }
        .text{
            flex: 1;
            font-size: .3733rem;
            h2{
                font-size: .5333rem;
                margin-bottom: .2667rem;
            }
            .score{
                margin: .1333rem 0;
                color: orange;
                span:last-child{
                    color:#999;
                    margin-left: .4rem;
                }
            }
            .send{
                display: flex;
                justify-content: space-between;
                font-size: .3733rem;
                color: #999;
                margin: .1333rem 0;
            }
            .evaluation{
                margin: .2667rem 0;
                span{
                    font-size: .32rem;
                    background-color: rgb(254, 234, 195);
                    padding: .08rem .16rem;
                    margin-right:.2667rem;
                    border-radius: .08rem;
                    // opacity: 0.5;
                    color: orangered;
                }
            }
            .coupons{
                display: flex;
                flex-wrap: wrap;
                span{
                    border: 1px solid rgb(249, 175, 175);
                    color: red;
                    padding: .0533rem .1333rem;
                    margin: .1333rem .1333rem 0 0;
                    border-radius: .08rem;
                }
            }
        }
    }
  }
}
</style>